<template>
  <div id="samplesample">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col span='8'>
          <el-form-item label="备件名称" prop="partName">
            <el-input v-model="form.partName" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="单价（元）" prop="price">
            <el-input v-model="form.price" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span='8'>
           <el-form-item label="型号" prop="partType">
            <el-input v-model="form.partType" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="库存数量" prop="number">
            <el-input v-model="form.number" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span='8'>
          <el-form-item label="警戒数量" prop="alertNumber">
            <el-input v-model="form.alertNumber" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="是否有效" prop="isEffectice">
            <el-select style="width: 260px" v-model="form.isEffectice" placeholder="请选择">
              <el-option label="有效" value="1"></el-option>
              <el-option label="无效" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import RichText from '@/components/RichText/RichText'
import {addPart} from '../../api/part'
import {setMap} from '../../utils/dataStorage'
export default {
  data() {
    return {
      form: {
        partName: "",
        partType: "",
        price: "",
        number: "",
        alertNumber: "",
        isEffectice: "",

      },
      rules: {
        partName: [
          { required: true, message: "请选择备件名称", trigger: "blur" }
        ],
        partType: [
          { required: true, message: "请选择备件类型", trigger: "blur" }
        ],
        price: [
          { required: true, message: "请选择备件价格", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入备件数量", trigger: "blur" }
        ],
        alertNumber: [
          { required: true, message: "请输入警戒数量", trigger: "blur" }
        ],
        isEffectice: [
          { required: true, message: "请输入是否有效", trigger: "blur" }
        ],
      },
      checkedCities: []
    };
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 设置提交的参数
          let param = new URLSearchParams();
          param.append("partName", this.form.partName);
          param.append("partType", this.form.partType);
          param.append("price",this.form.price);
          param.append("number",this.form.number);
          param.append("alertNumber",this.form.alertNumber);
          param.append("isEffectice",this.form.isEffectice);
          let that = this;
          addPart(param).then(r=>{
            setMap("id", r);
            this.$router.push({path: '/part_list'});
          }).catch(_=>{
              console.log(r);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    }
  }
};
</script>